<template>
  <button id="btn" @click="sendGet">发送GET请求</button>
  <button id="btn" @click="sendPost">发送POST请求</button>
  <div class="email" v-if="flag">
    <el-input placeholder="邮箱账号"></el-input>
  </div>
  <div class="phone" v-else>
    <el-input placeholder="手机号码" v-model="form.phone"></el-input>
    <el-input v-model="form.code" placeholder="请输入验证码">
      <template #suffix>
        <code-button
          slot="suffix"
          :phone="form.phone"
          @change-code="changeCode"
          :waitTime="waitTime"
        >获取验证码</code-button>
      </template>
    </el-input>
  </div>
</template>
<script>
import { reactive, toRefs, toRef, ref, defineAsyncComponent, watch } from "vue";
import { api } from "@/utils/network/index.js";
export default {
  name: 'aboutUs',
  components: {
    codeButton: defineAsyncComponent(() => import('@/components/util/codeButton.vue'))
  },
  setup() {
    let waitTime = ref(false)
    let form = reactive({
      phone: '',
      code: ''
    })
    watch(() => form.phone, (newVal, oldVal) => {
      if (newVal) {
        // console.log(newVal)
      }
    })
    let flag = ref(false);
    const params = reactive({ name: "Greyfus" });
    const data = reactive({
      id: 1,
      name: "sivan",
      age: "99",
    });
    const sendGet = () => {
      api.get(params);
    };
    const sendPost = async () => {
      let res = await api.post('/test_post', data);
      console.log(res)
    };
    const changeCode = ((e) => {
      if (!e) {

      }
    })
    return {
      sendGet,
      sendPost,
      form,
      waitTime,
      changeCode,
      flag,
      ...toRefs(data)
    };
  },
};
</script>
<style>
#btn {
  padding: 20px 50px;
  border: 1px solid red;
}
</style>
<route lang="yaml">
meta:
  level: 1
  name: "aboutUs"
  str: "关于我们"
</route>
